<template>
  <div>
    <el-row type="flex" :gutter="20" style="padding-left: 20px; margin-bottom: 8px">
      <el-col :span="4">
        <h2 style="margin-top: 23px; margin-left: 5px">班组管理</h2>
      </el-col>
      <el-col :span="19">
      </el-col>
      <el-col :span="1">
        <div style="padding: 20px 20px 15px 0">
          <el-button class="el-blue-button" @click="addEmployee" style="float: right"><i class="el-icon-plus"></i>&nbsp;新增</el-button>
        </div>
      </el-col>
    </el-row>
    <hr/>
    <el-table
      :data="users"
      style="width: 100%">
      <el-table-column prop="name" label="人员姓名" width="300" align="center"></el-table-column>
      <el-table-column prop="position" label="职位" width="300" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.position" @change="positionChanged(scope.row)">
            <el-option
              v-for="item in positions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="人员状态" width="300" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.status" @change="statusChanged(scope.row)" :disabled="scope.row.status===1?true:false">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button class="el-blue-button" size="mini" @click="editStaff(scope.row)">个人资料修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from '@/network/request'

export default {
  name: 'index',
  data () {
    return {
      positions: [{
        value: 1,
        label: '集控中心经理'
      }, {
        value: 2,
        label: '值长'
      }, {
        value: 3,
        label: '值班员'
      }, {
        value: 4,
        label: '其他'
      }],
      status: [{
        value: 1,
        label: '在岗',
        disabled: true
      }, {
        value: 2,
        label: '休息'
      }, {
        value: 3,
        label: '请假'
      }, {
        value: 4,
        label: '风场'
      }, {
        value: 5,
        label: '出差'
      }, {
        value: 6,
        label: '其他'
      }],
      users: [
        {
          id: 1,
          name: '赵二狗',
          position: 1,
          status: 1
        },
        {
          id: 2,
          name: '钱二狗',
          position: 2,
          status: 2
        },
        {
          id: 3,
          name: '孙二狗',
          position: 3,
          status: 3
        }],
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        psd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        confirmPsd: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        officePhone: [
          { required: true, message: '请输入办公电话', trigger: 'blur' },
          { min: 2, max: 11, message: '长度在 2 到 11 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    positionChanged (value) {
      this.$confirm('此操作将修改用户职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          method: 'post',
          url: '/bulletin/editUserPosition',
          params: {
            id: value.id,
            position: value.position
          }
        }).then(res => {
          if (res.code === 1) {
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          } else {
            this.$message.error('修改失败!')
          }
        }).catch((error) => {
          console.log(error)// 异常
        })
      }).catch(() => {})
    },
    statusChanged (value) {
      this.$confirm('此操作将修改用户状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          method: 'post',
          url: '/bulletin/editUserStatus',
          params: {
            id: value.id,
            position: value.status
          }
        }).then(res => {
          if (res.code === 1) {
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          } else {
            this.$message.error('修改失败!')
          }
        }).catch((error) => {
          console.log(error)// 异常
        })
      }).catch(() => {

      })
    },
    editStaff (value) {
      this.$router.push({
        name: '个人资料修改',
        params: {
          id: value.id,
          name: value.name
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
